<template>
  <div>
    <h2>Register</h2>
    <input v-model="name" placeholder="Name" />
    <input v-model="account" placeholder="Account" />
    <input v-model="pwd" type="password" placeholder="Password" />
    <input v-model="email" placeholder="Email" />
    <button @click="register">Register</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const name = ref('');
const account = ref('');
const pwd = ref('');
const email = ref('');

async function register() {
  try {
    await axios.post('/api/register', {
      name: name.value,
      account: account.value,
      pwd: pwd.value,
      email: email.value
    });
    alert('Registration successful');
  } catch (error) {
    console.error(error);
    alert('Registration failed');
  }
}
</script>
